<template>
  <div class="invoice-container">
    <SectionTitle title="发票信息" style="margin-bottom: 22px;">
      <div class="data-container">
        <dataDisplay :data-list="dataList"/>
      </div>
    </SectionTitle>
    <u-table
      v-if="tableData && tableData.length > 0"
      ref="invoiceTableRef"
      :data="tableList"
      :row-height="49"
      :border="true"
      beautify-table
      header-drag-style
      use-virtual
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <u-table-column align="left" label="审批单号" min-width="120">
        <template slot-scope="scope">
          <div v-if="!scope.row.approvalNo">--</div>
          <div v-else class="light-word" @click="toDetail(scope.row)">
            <ToolTip :content="scope.row.approvalNo" is-can-click @handelClick="toDetail(scope.row)"/>
          </div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="开票项目" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.project"/>
        </template>
      </u-table-column>
      <u-table-column align="right" label="含税金额(元)" min-width="100">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.amount" :price="scope.row.amount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="纳税人名称" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.taxpayerName"/>
        </template>
      </u-table-column>
      <u-table-column align="left" label="发票类型" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.invoiceType"/>
        </template>
      </u-table-column>
      <u-table-column align="left" label="状态" min-width="90">
        <template slot-scope="scope">
          <StatusText :color="['#406eff','#fd8546', 'red', '#999', '#31cc9c','#406eff'][scope.row.status]" :text="scope.row.status | invoiceStatus" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="申请人" min-width="80">
        <template slot-scope="scope">
          <CheckUserInfo v-if="scope.row.proposer" :label="scope.row.proposer" :user-id="scope.row.proposerId" />
          <div v-else>--</div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="申请部门" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.departmentName"/>
        </template>
      </u-table-column>
      <u-table-column align="left" label="创建时间" min-width="165">
        <template slot-scope="scope">
          {{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm') }}
        </template>
      </u-table-column>
    </u-table>
    <EmptyPlaceholder v-else slot="empty" empty-text="暂无数据" mode="border" style="padding:12px 0 18px 0"/>
    <div style="text-align: right;">
      <el-pagination
        v-if="tableData && tableData.length > 0"
        :current-page="page"
        :page-size="perPage"
        :total="tableData && tableData.length"
        :page-sizes="[10, 20, 50, 100, 250, 500]"
        :layout="showMobilePage ?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import TableAdaptive from '@/mixins/tableAdaptive';
import { standardFormat } from '@/filters/date';
import icon_17 from '@/assets/dataDisplay/icon_17.png';
import { mapState } from 'vuex';

export default {
  components: { SectionTitle, dataDisplay, EmptyPlaceholder },
  filters: {
    standardFormat,
    invoiceStatus(num) {
      // 0:草稿中，1:审批中，2:未过审，3:已撤销，4:已完成，5:待提交
      const arr = ['草稿中', '审批中', '未过审', '已作废', '已完成', '待提交'];
      return arr[num] || '--';
    }
  },
  mixins: [TableAdaptive],
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      page: 1,
      perPage: 10,
      tableRefName: 'invoiceTableRef', // 表格的ref名称
      idKey: 'id' // 唯一表示字段
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tableList() {
      return this.tableData.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    dataList() {
      if (this.tableData && this.tableData.length > 0) {
        const temp = this.tableData.reduce((pre, next) => {
          return Number(pre) + Number(next.amount);
        }, 0);
        return [{ label: '含税金额', data: (temp / 100).toFixed(2), icon: icon_17, width: '200px' }];
      } else {
        return [{ label: '含税金额', data: 0, icon: icon_17, width: '200px' }];
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
    },
    toDetail(row) {
      const routerData = {
        name: 'issueInvoiceDetail',
        query: {
          issueId: row.id,
          processId: row.processId
        }
      };
      const url = this.$router.resolve(routerData);
      window.open(url.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.invoice-container {
  margin-bottom: 16px;
}
.data-container {
  margin-left: 10px;
}
.light-word {
  cursor: pointer;
  color: #406eff;
}
</style>
